<template>
	<div class="courdetail">
		<div class="titlebox">
			<div class="title">
				<h3>课程名称:</h3>
				<p>{{subject}}</p>
			</div>
			<div class="btngroup">
				<el-button icon="el-icon-circle-plus-outline" type="primary" @click="addteacher" v-if="!btnflag">添加</el-button>
				<el-button  type="success" @click="successadd" v-if="btnflag">完成</el-button>
				<el-button icon="el-icon-circle-close" type="danger" @click="deleteicon"  v-if="!btnflag">删除</el-button>
				<h4 style="margin-right: 50px;margin-left: 15px;cursor: pointer;" @click="back" >返回</h4>
			</div>
		</div>
		<el-form class="el_form">
			<el-row>
				<el-col :span="12" v-for="(x,index) in teacharr" :key="index">
					<el-form-item class="el_form_item">
						<h4>授课老师:</h4>
						<p>{{x.teaName}}
							<i class="el-icon-error deleicon" v-show="iconflag" @click="deleteacher(x.teaId)"></i>
						</p>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-show="hideflag">
					<el-form-item class="el_form_item">
						<h4>授课老师:</h4>
							<el-select style="margin-left: 3px;margin-right: 10px;" v-model="value" placeholder="请选择" >
							<el-option
								v-for="item in options"
								:key="item.teaId"
								:label="item.teaName"
								:value="item.teaId">
							</el-option>
							</el-select>
							<el-button type="primary" icon="el-icon-plus" @click="sucessadd()"></el-button>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>

<script>
	export default{
		data() {
			return{
				baseUrl: require("../js/baseUrl.js").baseUrl,
				subject:"",
				btnflag:false,
				hideflag:false,
				iconflag:false,
				teacharr:[],
				options: [],
				subId:0,
				value:"",
			}
		},
		methods:{
			//显示添加
			//根据id查询教师
			getTeacher(){
				this.$http.post(this.baseUrl+"SchoolSys/getTeachersBySubId",{
					subId:this.subId
				}).then(res=>{
					if(res.data.code==200){
						this.teacharr=res.data.data.teachers
					}
				})
			},
			// SchoolSys/getTeachersOnSub
			getTeachers(){
				this.value=""
				this.$http.post(this.baseUrl+'SchoolSys/getTeachersOnSub',{
					subId:this.subId
				}).then(res=>{
					this.options=res.data.data.teachers.filter(v=>v.status!=1)
				})
			},
			back(){
				this.$router.push("/coursemanager/coursemanagement/courses")
			},
			successadd(){
				this.btnflag=false
				this.hideflag=false
				this.iconflag=false
			},
			deleteicon(){
				this.iconflag=true
				this.btnflag=true
			},
			addteacher(){
				this.value=""
				this.getTeachers()
				this.btnflag=true
				this.hideflag=true
	
			},
			sucessadd(){
				this.classAddTeacher()
			},
			//课程中添加老师
			classAddTeacher(){
			if(this.value!=""){
				this.$http.post(this.baseUrl+"SchoolSys/addTeacherToCourse",{
					teaId:this.value,
					subId:this.subId
				}).then(res=>{
					if(res.data.code==200){
						this.$message.success("添加成功")
						this.getTeacher()
						this.getTeachers()
					}
				})
			}
			
			},
			deleteacher(teaId){
				// this.$message.success("删除成功")
				this.$http.post(this.baseUrl+"SchoolSys/delTeacherToCourse",{
					teaId:teaId,
					subId:this.subId
				}).then(res=>{
					this.$message.success("删除成功")
					this.getTeacher()
				})
			}
		},
		mounted() {
			this.subId=this.$route.query.subId
			this.subject=this.$route.query.subName
			this.getTeacher()
			this.getTeachers()
		}
	}
</script>

<style>
	.courdetail{
		padding: 40px;
	}
	.courdetail .titlebox{
		display: flex;
		justify-content: space-between;
	}
	.courdetail .titlebox .title{
		display: flex;
	}
	.courdetail .titlebox .title h3{
		width: 85px;
	}
	.courdetail .titlebox .title p{
		width: 100px;
		margin-left: 1%;
		background-color: #ffffff;
		border: 1px solid #999;
		padding-left: 5px;
	}
	.courdetail .titlebox .btngroup{
		display: flex;
	}
	.courdetail .el_form{
		margin-top: 20px;
	}
	.courdetail .el_form .el_form_item h4{
		float: left;
	}
	.courdetail .el_form .el_form_item p{
		float: left;
		width: 55%;
		margin-left: 1%;
		background-color: #ffffff;
		border: 1px solid #999;
		padding-left: 5px;
		position: relative;
	}
	.courdetail .el_form .el_form_item .deleicon{
		position: absolute;
		top: -5px;
		right: -5px;
		cursor: pointer;
	}
</style>